<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    thead tr {
        height: 30px;
        font-size: 16px;
        background-color: skyblue;
    }
    
    tbody tr {
        height: 30px;
    }
    tbody td {
        border-bottom: 1px solid #d7d7d7;
        font-size: 14px;
        color:black;
    }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th><input type="checkbox" value=""></th>
                <th>商品</th>
                <th>价钱</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th><input type="checkbox" value=""></th>
                <td>iPhone8</td>
                <td>8000</td>
            </tr>
            <tr>
                <th><input type="checkbox" value=""></th>
                <td>iPad Pro</td>
                <td>5000</td>
            </tr> 
            <tr>
                <th><input type="checkbox" value=""></th>
                <td>iPad Air</td>
                <td>2300</td>
            </tr> 
            <tr>
                <th><input type="checkbox" value=""></th>
                <td>Apple Watch</td>
                <td>2000</td>
            </tr>
        </tbody>
    </table>
    <script>
        //1，获取元素
        var checkbox = document.querySelector('thead').querySelector('input');
        var checkboxs = document.querySelector('tbody').querySelectorAll('input');
        //需求1：全选选择和取消全选做法：点击全选按钮，让下面所有复选框的checked属性处于选中状态 跟随全选按钮即可
        checkbox.onclick = function(){
            for(var i = 0; i < checkboxs.length; i++){
                checkboxs[i].checked = this.checked;
            }
        }

        //需求2：下面复选框需要全部选中，上面全选才能选中做法︰给下面所有复选框绑定点击事件，每次点击，都要循环查看下面所有的复选框是否有没选中的，如果有一个没选中的，上面全选就不选中
        for(var i = 0; i< checkboxs.length; i++){    
            checkboxs[i].onclick = function(){
                //flag控制全选按钮是否选中
                var flag = true;
                for(var i = 0; i < checkboxs.length; i++){
                    if(checkboxs[i].checked == false){
                        flag = false;
                        break;
                    }        
                } 
                checkbox.checked = flag;    
            }   
        }
        
    </script>
</body>
</html>